<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/register.css" type="text/css">

    <!-- <style>
        /* label{
            display: inline-block;
            width: 100px;
            text-align: right;
        } */
    label {
        width: 150px;
        text-align: left;
        display: inline-block;
    }

    /* 如何覆盖标签的继承？ */
    #male {
        width: 5px;
    }

    </style> -->
    <script>
        function displayResult(){ 
            alert("注册成功!")
        }
    </script>
</head>
<body>

    <div>
        <form class="contact_form" action="#" method="post" >
        <ul>
        <li class="usually"><h2>用户注册</h2></li>
        <li>
            <label class="icon"> 昵称：</label>
            
            <input type="text" name="name" class="jl" maxlength="6">
        </li>

        <li>
            <label class="icon"> 注册邮箱：</label>
            
            <input type="text" name="emal"  class="jl" maxlength="20" >
        </li>
       
        <li>
            <label class="icon"> 密码：</label>
          
            <input type="password" name="mm"  class="jl"  maxlength="20" >
        </li>

        <li>
            <label >性别：
            
            <span>
                <input type="radio" name="sex" id="male" >
                <label for="male" >男</label>
                <input type="radio" name="sex" id="female">
                <label for="female">女</label>
            </span>
        </label>
        </li>
       
        <li>
            <label class="icon">年龄：</label>
        
            <input type="text" name="age"  maxlength="3">
        </li>

        <li>
            <label>兴趣爱好：</label>
         
            <div>
                <input type="checkbox" id="football" name="hobby[]" >
                <label for="football">足球</label>
                <input type="checkbox" id="dance" name="hobby[]">
                <label for="dance">跳舞</label>
                <input type="checkbox" id="swim" name="hobby[]">
                <label for="swim">游泳</label>
                <input type="checkbox" id="sing" name="hobby[]">
                <label for="sing">唱歌</label>
                <input type="checkbox" id="run" name="hobby[]">
                <label for="run">跑步</label>
                <input type="checkbox" id="yj" name="hobby[]">
                <label for="yj">瑜伽</label>
            </div>
        </li>

        <li class="advise">
            <label class="icon"> 自我介绍:</label>
      
            <textarea name="content" id="content"  class="jl" cols="30" rows="10">自我介绍</textarea>

        </li>

        <li class="footer">

            <form>
                <input type="submit"  value="立即注册" onclick="displayResult()">
            </form>
        </li>
        </ul>
    
        </form>
        </div>
</body>
</html>